<template>
	<view class="caty-active">
		<!-- 空白页 -->
		<view v-if="infolist.length == 0">
          <Blank v-if="type == 'hide'" isedit="暂无收藏哦~~"></Blank>
		  <Blank v-if="type == 'footprint'" isedit="暂无足迹哦~~"></Blank>
		</view>
		
		 <!-- 列表 -->
		<view class="cate-liket" v-else>
			<grid-view type="masonry" :cross-axis-count="2" :main-axis-gap="20" :cross-axis-gap="15" style="width: 100%;">
		<view class="cate-rietyon" v-for="(item,index) in infolist" :key="item.articleInfoResp.articleId">
			 <!-- 图文 -->
			<view v-if="infolist[index].articleInfoResp.detailType == 'Json'" @click="loaddocen(item)">
			<img class="cate-comig"
			 :src="item.articleInfoResp.images[0]">
			 </view>
			 
			 <!-- 视频 -->
			 <view v-if="infolist[index].articleInfoResp.detailType == 'Video'" @click="loaddocen(item)">
			 <img class="cate-comig"  :src="infolist[index].articleInfoResp.extendData.thumbnailUrl" mode='widthFix'> 	
			 <view class="cate-opemak">
			 <van-icon name="play"/>
			 </view>
			 </view>
			  <view v-if="infolist[index].articleInfoResp.detailType == 'Html'" class="" @click="loaddocen(item)">
			  	<image class="cate-comig" :src="item.articleInfoResp.images[0]" mode='widthFix' ></image>
			  <!-- 	<view class="acty-caty">{{forminfodeet(item.articleInfoResp.category.channel)}}</view>
			  	<view class="caet-repd"> {{item.articleInfoResp.title}}</view> -->
			  </view>
			 <view v-if="infolist[index].articleInfoResp.detailType == 'Html'">
			 	<view class="acty-caty">{{forminfodeet(item.articleInfoResp.category.channel)}}</view>
			 </view>
			 
			 <span class="cate-conspan">{{infolist[index].articleInfoResp.title}}</span>
			 
			 <view v-if="infolist[index].articleInfoResp.detailType != 'Html'">
			 	<img class="cate-image" @click="loaddocen(item)" v-if="infolist[index].avatar != null" :src="infolist[index].avatar" alt="">
			 	<img class="cate-image" @click="loaddocen(item)" v-else src="@/static/missing-face.png" alt="">
			 	<test class="cate-clogion" @click="loaddocen(item)">{{infolist[index].nick == null? '游客':infolist[index].nick}}</test>
			 	 <van-icon class="cate-icon" name="star-o" size="18" color="#9a9a9a" v-if="infolist[index].articleInfoResp.favoritesFlag == false" @click="aaaa(item)"/>
			 	 <van-icon class="cate-icon" name="star" size="18" v-else color="#ff7144" @click="aaaa(item)"/>
			 	 <span class="cate-spanon">{{infolist[index].articleInfoResp.favorites}}</span>
			 </view>
			 </view>
			 </grid-view>
			 </view>
			 
		 <van-loading class="actoue" v-show="siopen" size="24px" type="spinner">加载中...</van-loading>
	</view>
</template>

<script>
	import Blank from '@/package/components/blank.vue'
	import Api from '@/http/api.js'
	import employeesConst from "@/employees/employees.js";
	const hireTypet = {};
	employeesConst.hireTydeet.forEach((item) => {
	  hireTypet[item.channel] = item.value;
	});
	export default {
		components:{Blank},
		data(){
			return{
				siopen:false,
				infolist:[],
				infopiont:'',
				info:{
					cancel:"",
					articleId:''
				},
					q:{
						size:Number,
						index:1,
						searchText:''
					},
					 a:10,
					 type:''
			}
		},
		onLoad(option) {
		 console.log(option)
			this.type = option.type
			let title = '收藏列表'
			if(option.type==='footprint'){
				title = '我的足迹'
			}
			uni.setNavigationBarTitle({
				title  
			})
			this.loacgher()
			// 判断是否收藏
			
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.loacgher();
		},
		//加载更多
		onReachBottom(){
			if(this.type==='footprint'){
			const that = this;
			this.siopen = true
			this.q.size = this.q.size+20
			this.a = this.q.size
			setTimeout(async ()=>{
			let rec = await Api.xfootprint(this.q)
			this.infolist = rec.data.data
			that.siopen = false
			},1000)
			}
		},
		methods:{
			async loacgher(){
				this.q.size = this.a
				if(this.type == 'footprint'){
				const res = await Api.xfootprint(this.q)
				this.infolist = res.data.data
				} else{
					const res = await Api.xhide(this.q)
					this.infolist = res.data.data
				}
			},
			// 跳转文章详情
			loaddocen(item){
				if(item.articleInfoResp.detailType == "Video"){
					wx.getUserProfile({
					    desc: '用于完善用户信息',
					    success: (res) => {
						uni.navigateTo({
						url: `/package/detail/video?id=${item.articleInfoResp.articleId}&user=${item.userId}&userInfo=${res.userInfo.avatarUrl}`,
						 })
					    }
					   })
				}else if(item.articleInfoResp.detailType == "Json"){
				wx.getUserProfile({
				           desc: '用于完善用户信息',
				           success: (res) => {
							   console.log(res)
						  uni.navigateTo({
						  	url: `/package/detail/detail?id=${item.articleInfoResp.articleId}&user=${item.userId}&userInfo=${res.userInfo.avatarUrl}`,
						  })
				           }
				   })
				// var model = JSON.stringify(item);
						} else if(item.articleInfoResp.detailType == "Html"){
							this.infopiont = item.articleInfoResp.detailUrl
							uni.navigateTo({
								url: `/pages/components/out?id=`+ this.infopiont,
							})
						}
			},
			// 收藏
			async aaaa(item){
				this.info.articleId = item.articleInfoResp.articleId
				this.info.cancel = item.articleInfoResp.favoritesFlag
				const ress = await Api.collect(this.info)
			 	this.loacgher()
			},
			// 渲染分类
			  forminfodeet(code){
			  return hireTypet[code];
			  },
		}
	}
</script>

<style lang="scss">
	
	 // 列表
	.caty-active{
		background-color: #f5f5f5;
		text-align: justify;
	}
	// 文章列表
	.cate-liket{
		width: 100%;
		word-break: break-all;
		white-space: pre-wrap;
		font-weight: 400;
		font-size: 28rpx;
		margin-bottom: 12rpx;
		// 默认单行，如果需要瀑布流则改成多行
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;

		.cate-rietyon{	
			width: 100%;
			height: auto;
			break-inside: avoid;
			background-color: #FFFFFF;
			border-radius: 20rpx !important;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;
			break-inside: avoid;
		}
		.cate-comig{
			width: 100%;
			border-top-left-radius:20rpx;
			border-top-right-radius:20rpx;
		}
	}
	.cate-conspan{
			display: -webkit-box;
		    color: #1d1d1d;
			font-size: 24rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-bottom: 10rpx;
			line-height: 28rpx;
			font-weight: 500;
			overflow:hidden;
			-webkit-line-clamp: 2; /* 能够显示的最大行数 */
		    -webkit-box-orient: vertical; 
		}
		.cate-image{
			height: 45rpx;
			width: 45rpx;
			border-radius: 50%;
		    margin-left: 20rpx;
		}
		
	.cate-icon{
		transform: translateX(25rpx);
	}
	.cate-spanon{
		display: inline-block;
		transform: translateX(25rpx);
		font-weight: 500 !important;
		font-size: 24rpx;
		color: #8a8a8a;
	}
	.cate-clogion{
		    display: inline-flex;
		    width: 150rpx;
			font-size: 24rpx;
			transform: translateY(-30%);
			margin-left: 10rpx;
			color: #A8A8A8;
		}
		.cate-opemak{
			background-color: rgba(0, 0, 0, 0.3);
			width: 35rpx;
			height: 35rpx;
			border-radius: 50%;
			z-index: 800;
			position: relative;
			left: 280rpx;
			bottom: 450rpx;
		}
		.van-icon{
			position: relative;
			bottom: 3rpx;
		}
	// 加载
	.actoue{
		margin-left: 40%;
		text-align: center;
	}
	.acty-caty{
		font-size: 24rpx;
		font-weight: 500;
		color: #ff7144;
		margin-left: 20upx;
		margin-bottom: 15upx;
	}
</style>